<template>
  <div style="margin:10px 0 0 0;background-color: white;height: 100%">
    <el-dialog
      class="el-dialog__body"
      width="470px"
      title="报警设置"
      :visible.sync="settingDialog"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :before-close="closeModel">
      <hr class="boundary">
      <el-form label-width="80px">
        <div class="content">
          <div class="highTemp" style="padding-top: 20px">温度高于:
            <el-input-number v-model="highTemp.value" :precision="0" size="mini"
                             controls-position="right" @change=""></el-input-number>
            度
            <div class="alarm">
              报警类型：<el-input v-model="highTemp.name" size="mini"></el-input>
            </div>
          </div>
          <div class="">温度低于:
            <el-input-number v-model="lowTemp.value" :precision="0" size="mini"
                             controls-position="right" @change=""></el-input-number>
            度
            <div class="alarm">
              报警类型：<el-input v-model="lowTemp.name" size="mini"></el-input>
            </div>
          </div>
          <div class="">电流高于:
            <el-input-number v-model="highElectric.value" :precision="0" size="mini"
                             controls-position="right" @change=""></el-input-number>
            mA&nbsp;
            <div class="alarm">
              报警类型：<el-input v-model="highElectric.name" size="mini"></el-input>
            </div>
          </div>
          <div class="">电流低于:
            <el-input-number v-model="lowElectric.value" :precision="0" size="mini"
                             controls-position="right"></el-input-number>
            mA
            <div class="alarm">
              报警类型：<el-input v-model="lowElectric.name" size="mini"></el-input>
            </div>
          </div>
        </div>
      </el-form>
      <hr class="boundary">
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeModel">取 消</el-button>
        <el-button type="primary" @click="modifySetting">保 存</el-button>
      </div>
    </el-dialog>

    <div class="tableHead">
      <div class="tableHead-left">
        <el-button type="danger" size="small" style="margin: 10px 0 0 0" @click="showDelDialog">
          删除选中
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-setting"
          size="small"
          style="margin: 10px 0 0 0px"
          @click="showDialog"
        >
          设置
        </el-button>
      </div>
    </div>
    <template>
      <el-table
        ref="multipleTable"
        :data="tableData"
        :row-class-name="tableRowClassName"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          fixed
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column align="center" prop="name" label="设备名称"></el-table-column>
        <el-table-column align="center" prop="location" label="位置" width="260"></el-table-column>
        <el-table-column align="center" prop="reason" label="报警原因"></el-table-column>
        <el-table-column align="center" prop="warningTime" label="报警时间"></el-table-column>
        <el-table-column align="center" prop="dealTime" label="处理时间">
          <template slot-scope="scope">
            <span v-if="scope.row.isChecked===1">{{scope.row.dealTime}}</span>
            <span v-else>未处理</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.isChecked===0"
              class="el-icon-check" size="mini"
              @click="check(scope.row.id)"
              circle
            >
            </el-button>
            <el-button class="el-icon-delete" size="mini" circle @click="showDelDialog(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-dialog title="删除"
               top="150px"
               width="470px"
               :visible.sync="showDelMessage"
               :close-on-press-escape="false"
               :close-on-click-modal="false"
               :before-close="closeModel"
               append-to-body>
      <hr class="boundary">
      <div class="body" style="text-align: center">
        <div class="tip">确定删除该消息？</div>
      </div>
      <hr class="boundary">
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeModel">关 闭</el-button>
        <el-button type="danger" @click="delMessage(index)">删 除</el-button>
      </div>
    </el-dialog>

    <div class="el-footer">
      <el-pagination
        align="center"
        :page-size="pageSize"
        :total="total"
        @current-change="changePage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import Axios from 'axios'

  export default {
    data () {
      return {
        settingDialog: false,
        showDelMessage: false,
        highTemp: {id:'',name:'',value:'',type:''},
        lowTemp: {id:'',name:'',value:'',type:''},
        highElectric: {id:'',name:'',value:'',type:''},
        lowElectric: {id:'',name:'',value:'',type:''},
        total: 0,
        tableData: [],
        messages: [],
        message: '',
        delMessages: [],
        index: '',
        pageNum: 1,
        pageSize: 15
      }
    },
    methods: {
      handleEdit (index, row) {
        console.log(index, row)
      },
      handleDelete (index, row) {
        console.log(index, row)
      },
      handleSelectionChange(val){
        let self = this
        self.delMessages = []
        console.log((val))
        val.forEach(item => {
          if (self.delMessages.indexOf(item.id)===-1){
            self.delMessages.push(item.id)
          }
        })
        self.index = 1
        console.log(self.delMessages)
      },
      changePage(pageNum){
        console.log('当前页'+pageNum)
        this.pageNum = pageNum
        this.getTableData(pageNum)
      },
      showDialog() {
        console.log('showDialog')
        this.getSetData()
        this.settingDialog = true
      },
      showDelDialog (id) {
        this.showDelMessage = true
        this.message = id
      },
      closeModel () {
        this.settingDialog = false
        this.showDelMessage = false
      },

      modifySetting(){
        let self = this
        let alarms = [self.highTemp,self.lowTemp,self.highElectric,self.lowElectric]
        console.log(alarms)
        alarms.forEach(item => {
          console.log(item.id)
          $.ajax({
            type: 'PUT',
            url: this.api+'alarms',
            headers: {
              'Content-Type': 'application/json',
              'X-Requested-With': 'XMLHttpRequest'
            },
            xhrFields: {
              withCredentials: true
            },
            data: JSON.stringify({id: item.id,name: item.name,value: item.value}),
            // data: {alarm: item},
            success: data => {
              if (item.id === alarms.length) {
                this.$message({
                  type: "success",
                  message: "修改成功！"
                })
              }
              this.closeModel()
            },
            error: () => {
              this.$message({
                type: "warning",
                message: "修改异常！"
              })
            }
          })
        })
      },

      getSetData () {
        let self = this
        Axios.get(this.api+'alarms',{
          headers: {'X-Requested-With': 'XMLHttpRequest'},
          withCredentials: true
        }).then(res => {
          console.log(res.data)
          self.highTemp.id = res.data[0].id
          self.highTemp.name = res.data[0].name
          self.highTemp.value = res.data[0].value
          self.lowTemp.id = res.data[1].id
          self.lowTemp.name = res.data[1].name
          self.lowTemp.value = res.data[1].value
          self.highElectric.id = res.data[2].id
          self.highElectric.name = res.data[2].name
          self.highElectric.value = res.data[2].value
          self.lowElectric.id = res.data[3].id
          self.lowElectric.name = res.data[3].name
          self.lowElectric.value = res.data[3].value
        })
      },

      getTableData(pageNum){
        let self = this
        let isChecked = []
        let isNotChecked = []
        self.tableData = []
        Axios.get(self.api+'message',{
          params: {pageNum: pageNum,pageSize: self.pageSize},
          headers: {'X-Requested-With': 'XMLHttpRequest'},
          withCredentials: true
        }).then(res => {
          // console.log(res.data)
          self.total = res.data.total
          res.data.list.forEach(message => {
            if (message.status === false) {
              isChecked.push({
                id: message.id,
                name: message.deviceName,
                location: message.zoneName+'-'+message.buildingName+'-'+message.floor+'层'+'-'+message.roomName,
                reason: message.content,
                warningTime: message.create_time,
                isChecked: message.status? 1:0,
                dealTime: message.update_time
              })
            } else if (message.status === true) {
              isNotChecked.push({
                id: message.id,
                name: message.deviceName,
                location: message.zoneName+message.buildingName+message.floor+'层'+message.roomName,
                reason: message.content,
                warningTime: message.create_time,
                isChecked: message.status? 1:0,
                dealTime: message.update_time
              })
            }
            self.tableData = isChecked.concat(isNotChecked)
          })
        })
      },

      check(id){
        let self = this
        Axios.put(this.api+'message',{'id':id},{
          params: {
            'id':id
          },
          headers: {
            'Content-Type': 'application/json',
            'X-Requested-With':'XMLHttpRequest'
          },
          withCredentials: true
        }).then(res => {
          console.log('result'+res)
          self.getTableData(this.pageNum)
        })
      },

      delMessage(){
        let self = this
        if (self.index === 1) {
          Axios.delete(this.api+`message/${self.delMessages}`,{
            headers: {
              'X-Requested-With': 'XMLHttpRequest'
            },
            withCredentials: true
          }).then(res => {
            this.$message({
              type: "success",
              message: "删除成功！"
            })
            self.getTableData(self.pageNum)
            self.index = ''
            self.message = ''
            self.delMessages = []
            self.showDelMessage = false
          }).catch(reason => {this.$message({type: "warning",message:"删除异常！"})})
        } else {
          self.delMessages.push(self.message)
          Axios.delete(this.api+`message/${self.delMessages}`,{
            headers: {
              'X-Requested-With': 'XMLHttpRequest'
            },
            withCredentials: true
          }).then(res => {
            this.$message({
              type: "success",
              message: "删除成功！"
            })
            self.getTableData(self.pageNum)
            self.message = ''
            self.delMessages = []
            self.showDelMessage = false
          }).catch(reason => {this.$message({type: "warning",message:"删除异常！"})})
        }
      },

      tableRowClassName({row}) {
        // console.log('-_-'+row.isChecked)
        if (row.isChecked === 0){
          return 'not-checked'
        }
        return 'checked'
      }
    },

    mounted() {
      this.getTableData()
    }
  }
</script>

<style>
  .el-dialog__body {
    padding: 0;
  }

  .el-input__inner {
    border: 1px solid #BBB;
  }

  .content {
    margin: 0 20px 0 30px;
  }

  .el-input-number--mini {
    width: 100px;
    margin: 0 4px 18px 10px;
  }

  .alarm {
    float: right;
    width: 180px;
  }

  .el-input--mini {
    width: 100px;
  }

  .tableHead-left {
    padding-left: 20px;
    float: left;
  }

  .tableHead-right {
    display: inline-flex;
    flex-direction: row-reverse;
    width: 50%;
  }

  .tableHead .tableHead-right .el-input-sellf {
    position: relative;
    font-size: 14px;
    display: inline-block;
    /* width: 100%; */
  }

  .tableHead .tableHead-right .tableSearch {
    border-radius: 5px;
    height: 40px;
    width: 50px;
  }

  .checked {
    font-weight: 100;
  }

  .not-checked {
    font-weight: 700;
  }

  .tip {
    line-height: 150px;
    font-size: 23px;
    letter-spacing: 1px;
  }
</style>
